<template>
  <div class="nav-container">
    <el-select
      v-model="value1"
      multiple
      collapse-tags
      style="width: 20%"
      placeholder="村庄规划"
    >
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="value2"
      multiple
      collapse-tags
      style="width: 20%"
      placeholder="村庄经营"
    >
      <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="value3"
      multiple
      collapse-tags
      style="width: 20%"
      placeholder="村庄治理"
    >
      <el-option
        v-for="item in options3"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="value4"
      multiple
      collapse-tags
      style="width: 20%"
      placeholder="乡村服务"
    >
      <el-option
        v-for="item in options4"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="value5"
      multiple
      collapse-tags
      style="width: 20%"
      placeholder="文化旅游"
    >
      <el-option
        v-for="item in options5"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options1: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "五年蓝图",
        },
        {
          value: "选项3",
          label: "三区三线",
        },
        {
          value: "选项4",
          label: "交通建设",
        },
        {
          value: "选项5",
          label: "遥感监测",
        },
      ],
      options2: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "农属企业",
        },
        {
          value: "选项3",
          label: "承包商",
        },
        {
          value: "选项4",
          label: "家庭农场",
        },
        {
          value: "选项5",
          label: "合作社",
        },
        {
          value: "选项6",
          label: "入驻工厂",
        },
      ],
      options3: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "污水监测",
        },
        {
          value: "选项3",
          label: "水利设施",
        },
        {
          value: "选项4",
          label: "地下管网",
        },
        {
          value: "选项5",
          label: "智能灯杆",
        },
        {
          value: "选项6",
          label: "垃圾分类",
        },
        {
          value: "选项7",
          label: "污水井盖",
        },
        {
          value: "选项8",
          label: "环境监测",
        },
        {
          value: "选项7",
          label: "避灾场所",
        },
      ],
      options4: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "村民簿",
        },
        {
          value: "选项3",
          label: "事件监测",
        },
        {
          value: "选项4",
          label: "党员户",
        },
        {
          value: "选项5",
          label: "帮扶对象",
        },
        {
          value: "选项6",
          label: "村情民意",
        },
        {
          value: "选项7",
          label: "交通出行",
        },
        {
          value: "选项8",
          label: "村民活动",
        },
      ],
      options5: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "旅游景点",
        },
        {
          value: "选项3",
          label: "文创",
        },
        {
          value: "选项4",
          label: "民宿",
        },
        {
          value: "选项4",
          label: "美食",
        },
      ],
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
    };
  },
};
</script>
<style lang="less" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  /*background-image: linear-gradient(to top, #127c97 0%, #072252 100%);*/
  background-image: url("../../public/static/img/country.jpg");
  background-size: 100% 100%;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 9%;
  display: flex;
  background-color: rgba(75, 72, 72, 0.2);
  border: 1px solid #bd2c00;
  align-items: center;

  .title {
    margin-left: 20px;
    width: 30%;
    /*margin-left: 3%;*/
    font-size: 30px;
    /*font-style: oblique;*/
    color: #ffffff;
  }
  .nav-container {
    width: 60%;
    display: flex;
    /*align-items: center;*/
    .nav {
      width: 20%;
      margin-left: 50px;
      cursor: pointer;
    }
  }

  .nav-container /deep/ .el-input__inner {
    border: 2px solid aquamarine;
    border-radius: 20px;
    background-color: transparent;
  }
  .nav-container /deep/ .el-input__inner::-webkit-input-placeholder {
    color: #fff;
  }
  .setting {
    position: absolute;
    right: 40px;
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  .screen-left {
    height: 78%;
    width: 20%;
    margin-top: 2%;
    #left-top {
      height: 20%;
      position: relative;
      border: 1px solid #bd2c00;
    }
    #left-middle {
      margin-top: 5px;
      height: 35%;
      position: relative;
      border: 1px solid #bd2c00;
    }
    #left-bottom {
      margin-top: 5px;
      height: 40%;
      position: relative;
      border: 1px solid #bd2c00;
    }
  }
  .screen-right {
    height: 78%;
    width: 20%;
    position: absolute;
    right: 1px;
    margin-top: 2%;
    #right-top {
      height: 45%;
      position: relative;
      border: 1px solid #bd2c00;
    }
    #right-bottom {
      height: 50%;
      margin-top: 5px;
      position: relative;
      border: 1px solid #bd2c00;
    }
  }
}
</style>
